<template>
  <div class="table">
    <div>
      <el-button style="float: right" type="primary" @click="batch_dialog">接口流配置</el-button>
    </div>
    <div style="padding-top: 50px">
      <el-table
        :data="table.content"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        style="float:left;width:100%"
        :row-key="getRowKey"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          reserve-selection
          width="55"
        />
        <el-table-column align="center" label="ID" width="55">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="Project" width="130">
          <template slot-scope="scope">
            {{ scope.row.project }}
          </template>
        </el-table-column>
        <el-table-column label="Name" width="200">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="environment" width="250" align="left">
          <template slot-scope="scope">
            {{ scope.row.environment }}
          </template>
        </el-table-column>
        <el-table-column label="url" align="left">
          <template slot-scope="scope">
            {{ scope.row.url }}
          </template>
        </el-table-column>
        <el-table-column label="Method" align="center" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.method===1"><el-tag type="success">GET</el-tag></span>
            <span v-if="scope.row.method===2"><el-tag type="danger">POST</el-tag></span>
            <span v-if="scope.row.method===3"><el-tag type="info">PUT</el-tag></span>
            <span v-if="scope.row.method===4"><el-tag type="warning">DELETE</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="created_at" width="180" label="update_time">
          <template slot-scope="scope">
            <span>{{ scope.row.update_time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="left" prop="created_at" width="180" label="create_time">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="更新人" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.username }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          background
          :current-page="table.current_page"
          :page-sizes="[8]"
          :page-size="table.size_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="table.case_total"
          style="float: left; padding: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div>
      <el-dialog
        :visible.sync="batch_list_dialog"
        width="70%"
      >
        <div style="overflow: auto; height: 700px">
          <div style="padding: 10px">
            <el-cascader
              ref="value_cascade"
              v-model="menu_id"
              style="width: 250px"
              placeholder="输入接口名称搜索"
              :options="tree"
              :props="{value:'id',label:'label',emitPath:false}"
              filterable
              clearable
              :show-all-levels="false"
              @change="getChild()"
            >
              <span slot-scope="{ node, data }" class="custom-tree-node">
                <span v-if="data.type===0"><i :class="icon0" style="padding-right: 7px" />{{ node.label }}{{ "("+node.value+")" }}</span>
                <span v-if="data.type===1"><i :class="icon1" style="padding-right: 7px" />{{ node.label }}{{ "("+node.value+")" }}</span>
                <span v-if="data.type===2"><i :class="icon2" style="padding-right: 7px" />{{ node.label }}{{ "("+node.value+")" }}</span>
              </span>
            </el-cascader>
          </div>
          <el-table
            :data="batch_data"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
            style="float:left;width:100%; overflow: auto"
          >
            <el-table-column align="center" label="ID" width="55">
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>
            <el-table-column label="Project" width="130">
              <template slot-scope="scope">
                {{ scope.row.project }}
              </template>
            </el-table-column>
            <el-table-column label="Name" width="200">
              <template slot-scope="scope">
                {{ scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column class-name="status-col" label="environment" width="250" align="left">
              <template slot-scope="scope">
                {{ scope.row.environment }}
              </template>
            </el-table-column>
            <el-table-column label="url" align="left">
              <template slot-scope="scope">
                {{ scope.row.url }}
              </template>
            </el-table-column>
            <el-table-column label="Method" align="center" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.method===1"><el-tag type="success">GET</el-tag></span>
                <span v-if="scope.row.method===2"><el-tag type="danger">POST</el-tag></span>
                <span v-if="scope.row.method===3"><el-tag type="info">PUT</el-tag></span>
                <span v-if="scope.row.method===4"><el-tag type="warning">DELETE</el-tag></span>
              </template>
            </el-table-column>
            <el-table-column id="step" width="200" label="排序" align="center">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.step" :min="1" controls-position="right" />
              </template>
            </el-table-column>
            <el-table-column align="center" prop="action" label="操作">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="del_case(scope.$index, scope.row)">删除</el-button>
                <el-button v-if="result_code === 1" type="success" size="small" @click="result_view(scope.row.id)">查看结果</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div>
            <el-button style="float: right" type="primary" @click="batch_send_list">批量执行</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="任务结果详情"
        :visible.sync="batch_result_dialog"
        width="40%"
      >
        <el-tabs v-model="tabs_activeName">
          <el-tab-pane label="请求url" name="req_url">
            <p>{{ single_result_details.url }}</p>
          </el-tab-pane>
          <el-tab-pane label="请求params" name="params">
            <json-viewer :value="single_result_details.params" />
          </el-tab-pane>
          <el-tab-pane label="请求headers" name="headers">
            <json-viewer :value="single_result_details.headers" />
          </el-tab-pane>
          <el-tab-pane label="请求Body" name="Body">
            <json-viewer :value="single_result_details.body" />
          </el-tab-pane>
          <el-tab-pane label="请求结果" name="req_result">
            <json-viewer :value="single_result_details.response" />
          </el-tab-pane>
          <el-tab-pane label="断言结果" name="assert_data">
            <json-viewer :value="single_result_details.assert_data" />
          </el-tab-pane>
          <el-tab-pane label="参数提取" name="extract_result">
            <json-viewer :value="single_result_details.extract_result" />
          </el-tab-pane>
          <el-tab-pane label="响应时间" name="response_time">
            <p>接口响应时间： {{ single_result_details.response_time }}</p>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { batch_get_case, batch_list_request, getsingleTestcaselist } from "@/api/testcase";
export default {
  name: "CaseList",
  props: {
    // eslint-disable-next-line vue/require-default-prop
    table: [Array, Object],
    // eslint-disable-next-line vue/require-default-prop
    tree: [Array, Object]
  },
  data() {
    return {
      icon0: 'el-icon-s-home',
      icon1: 'el-icon-folder-opened',
      icon2: 'el-icon-document',
      menu_id: null,
      api_tree: [],
      tabs_activeName: "req_url",
      batch_result_details: [],
      single_result_details: {},
      batch_result_dialog: false,
      result_code: 0,
      batch_data: [],
      batch_list_dialog: false,
      case_total: '',
      select_list: [],
    }
  },
  created() {
    this.is_login()
  },

  methods: {
    is_login() {
      // eslint-disable-next-line no-prototype-builtins
      if (localStorage.hasOwnProperty("user_id") === false || localStorage.getItem("user_id") === '') {
        this.$router.push("/login")
        this.$message.error("未登录，请前往登录")
      }
    },
    del_case(index, row) {
      this.batch_data.splice(index, 1)
    },
    getChild() {
      batch_get_case({ "testcase_id": this.menu_id }).then(res => {
        if (res.data.code === 200) {
          this.batch_data.push(res.data.content)
          this.$message.success(res.data.message)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    result_view(id) {
      this.batch_result_dialog = true
      const case_id = id
      this.batch_result_details.forEach((value) => {
        if (value.testcase_id === case_id) {
          this.single_result_details = value
        }
      })
    },
    batch_send_list() {
      batch_list_request({ "content": this.batch_data, "user_id": Number(localStorage.getItem("user_id")) }).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.batch_result_details = res.data.content
          this.result_code = 1
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    batch_dialog() {
      if (this.select_list === undefined || this.select_list.length <= 0) {
        this.$message.error("请勾选目标接口")
      } else {
        this.batch_list_dialog = true
        this.batch_data = this.select_list
      }
    },
    getRowKey(row) {
      return row.id;
    },
    handleSelectionChange(val) {
      for (let i = 0; i < val.length; i++) {
        val[i].step = i
      }
      this.select_list = val
    },
    // 页签-条/页 跳转
    handleSizeChange(val) {
      this.table.size_page = val
      this.get_single_list()
    },
    // 底部页签跳转
    handleCurrentChange(val) {
      this.table.current_page = val
      this.get_single_list()
    },
    // 获取单个文件夹列表
    get_single_list() {
      const req = {}
      req.id = this.table.id
      req.current_page = this.table.current_page
      req.size_page = 8
      getsingleTestcaselist(req).then(res => {
        this.table.content = res.data.content
        this.case_total = res.data.case_total
      })
    },
  }
}
</script>

<style scoped lang="scss">
.el-tree {
  width: 100%;
  overflow: scroll;
}

.el-tree-node {
  display: inline-block;
  min-width: 100%;
}
</style>
